<template>
    <h1>我是APP组件</h1>
    <button @click="myId = 'MyCom'">首页</button>
    <button @click="myId = 'MyCom2'">分类</button>
    <button @click="myId = 'MyCom3'">购物车</button>
    <button @click="myId = 'MyCom4'">个人页</button>

    <keep-alive :include="['MyCom3', 'MyCom4']">
        <component :is="myId"></component>
    </keep-alive>
</template>

<script>
import MyCom from './component/my_com.vue'
import MyCom2 from './component/my_com2.vue'
import MyCom3 from './component/my_com3.vue'
import MyCom4 from './component/my_com4.vue'
export default {
    data() {
        return {
            myId: "MyCom"
        }
    },
    components: {
        MyCom,
        MyCom2,
        MyCom3,
        MyCom4,
    },
};
</script>

<style scoped></style>
